<script setup lang="ts">
import { useViewportFix } from './utils/viewport'
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import TabBar from './components/TabBar.vue' 

// 使用视口高度修复
useViewportFix()

// 获取当前路由
const route = useRoute()

// 添加视口高度变量
const vh = ref(window.innerHeight * 0.01)
const activeTab = ref('首页') // 保留activeTab状态

// 定义需要显示TabBar的路由路径
const showTabBarRoutes = ['/home', '/video', '/my', '/community', '/sport']

// 计算属性：是否显示TabBar
const showTabBar = computed(() => {
  return showTabBarRoutes.includes(route.path)
})

// 监听视口大小变化
const updateViewportHeight = () => {
  vh.value = window.innerHeight * 0.01
  document.documentElement.style.setProperty('--vh', `${vh.value}px`)
}

import { onMounted } from 'vue';
import { syncFavoritesFromBackend } from './utils/favoriteStore';

onMounted(async () => {
  // 应用启动时同步收藏状态
  await syncFavoritesFromBackend();
});

onMounted(() => {
  updateViewportHeight()
  window.addEventListener('resize', updateViewportHeight)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateViewportHeight)
})
</script>

<template>
  <div class="app" :class="{ 'has-tabbar': showTabBar }">
    <router-view />
    
    <!-- 使用TabBar组件，只在特定页面显示 -->
    <TabBar v-if="showTabBar" v-model:activeTab="activeTab" />
  </div>
</template>

<style scoped>
.app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  color: #2c3e50;
  margin-top: 0;
  padding-bottom: 0; /* 移除底部内边距 */
  position: relative;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100); /* 使用自定义视口高度变量 */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column; /* 确保子元素垂直排列 */
  height: 100vh; /* 使用视口高度 */
  overflow: hidden; /* 防止整体滚动 */
}

/* router-view应占据除导航栏外的所有空间，并允许滚动 */
.app > :first-child {
  flex: 1;
  overflow-y: auto; /* 允许内容区域垂直滚动 */
  padding-bottom: 20px; /* 给内容底部添加一些间距 */
  margin-bottom: 0; /* 默认不添加底部边距 */
}

/* 只在显示TabBar的页面添加底部边距 */
.app.has-tabbar > :first-child {
  margin-bottom: 70px; /* 只在有TabBar时添加底部边距 */
}

/* 适配iPhone X及以上机型的底部安全区域 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .app.has-tabbar > :first-child {
    margin-bottom: calc(70px + env(safe-area-inset-bottom)); /* 调整内边距 */
  }
}

/* 添加顶部标题栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
</style>
